<template>
  <div>
    <!-- 数据查询 -->
    <div class="filter-container">
      <el-input
          placeholder="请输入申请人"
          prefix-icon="el-icon-search"
          v-model="listQuery.name"
          @input = "getData()"
          >
      </el-input>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        fixed
        width="50">
      </el-table-column>
      <el-table-column
        prop="account"
        fixed
        label="申请人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="created"
        sortable
        label="申请时间">
        <template slot-scope="{row}">
          <span>{{row.created | getDate }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="apply_goods"
        label="商品名称">
      </el-table-column>

      <el-table-column
        prop="apply_goods_num"
        label="申请数量">
      </el-table-column>

      <el-table-column
        prop="apply_reason"
        label="申请原因">
      </el-table-column>

      <el-table-column
        prop="status"
        label="审批状态"
        :filters="filterStatusData"
        :filter-method="filterHandler">
        <template slot-scope="{row}">
          <el-tag :type="row.status | getStatusStyle">{{row.status | getStatus}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250">
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(row)" :disabled="row.status!=0 &&row.status!=3 &&row.status!=6 &&row.status!=9 ">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row)" :disabled="row.status!=0 &&row.status!=3 &&row.status!=6 &&row.status!=9 ">删除</el-button>
          <el-button
            size="mini"
            type="success"
            @click="handleSubmit(row)" :disabled="row.status!=0 &&row.status!=3 &&row.status!=6 &&row.status!=9 ">提交</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹框 -->
    <el-dialog title="申请管理-办公审批-编辑" :visible.sync="dialogEditVisible">
      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- 下拉框 -->
        <el-form-item label="申请人" prop="applicant">
          <el-select v-model="ruleForm.applicant" placeholder="请选择申请人" style="width: 100%;">
            <el-option  v-for="item in employeeSelect" :key="item.id" 
                    :label="item.account" :value="item.id"></el-option>
          </el-select>
        </el-form-item>

      <!-- 日期 -->
        <el-form-item label="申请日期" prop="created">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.created" style="width: 100%;"></el-date-picker>
        </el-form-item>

        <!-- 下拉框 -->
        <el-form-item label="申请商品" prop="apply_goods">
          <el-select v-model="ruleForm.apply_goods" placeholder="请选择申请商品" style="width: 100%;">
            <el-option v-for="item in officeSupplies" :key="item.key" 
                :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="申请数量" prop="apply_goods_num">
        <el-input-number v-model="ruleForm.apply_goods_num"  :min="1" :max="10" label="申请数量"></el-input-number>
        </el-form-item>

        <el-form-item label="申请原因" prop="apply_reason">
          <el-input type="textarea" placeholder="请选择申请原因" v-model="ruleForm.apply_reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateData()">编 辑</el-button>
      </div>
    </el-dialog>

    <!-- 删除弹框 -->
    <el-dialog title="申请管理-办公审批-删除" :visible.sync="dialogDelVisible">
      <p>确定删除？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDelVisible = false">取 消</el-button>
        <el-button type="primary" @click="delData()">删 除</el-button>
      </div>
    </el-dialog>

    <!-- 引入全局组件 -->
    <!-- :page.sync="listQuery.pageNo" 相当于 @update:page="val=>listQuery.pageNo = val" -->
    <!-- total: 总条数
    page: 页码
    pageSize: 每一页的条数
    @change: 查询列表数据 -->
    <my-pagination 
      :total ="rows"
      :page.sync ="listQuery.pageNo"
      :pageSize.sync ="listQuery.pageSize"
      @change = "getData"
    />
  </div>
</template>

<script>
import {officeList,userEmployee,officeCreate,officeDelete,officeSubmit} from '@/api/http'
import {officeSupplies} from '@/common/selectData'

export default {
  data(){
    return {
        tableData: [], //表格展示数据
        rows:1, //总条数
        filterStatusData:[], //审批状态数据过滤
        listQuery:{
          pageNo:1, //页码
          pageSize:10, //每页条数
          name:'' //查询申请人
        },
        ruleForm:{
          applicant:'',//申请人
          apply_goods:'', //申请商品
          apply_goods_num:'', //申请数量
          apply_reason:'',//申请原因
          created:'', //申请日期
        },
        dialogEditVisible:false, //编辑弹框的状态
        dialogDelVisible:false, //删除弹框的状态
        employeeSelect:[], //查询所有员工下拉数据
        officeSupplies, //办公商品
      }
  },
  mounted(){
    this.getData();
  },
  methods:{
    getData(){
      officeList(this.listQuery).then(res=>{
        let {code,data} = res.data;
        if(code==20000){
          this.tableData = data.list; //获取数据
          this.rows = data.rows; //总条数
          //审批状态数据过滤
          this.filterStatus(this.tableData);
        }
      })
    },
    getEmployee(){  //查询所有员工
      userEmployee().then(res=>{
        let {code,data} = res.data;
        if(code==20000){
          this.employeeSelect = data;
        }
      })
    },
    //编辑弹框显示
    handleEdit(row){
      this.getEmployee(); //查询所有员工
      this.ruleForm = {...row};
      this.dialogEditVisible = true; //编辑弹框的状态
    },
    //编辑数据
    updateData(){
      officeCreate(this.ruleForm).then(res=>{
        let {code,data} = res.data;
        if(code==20000){
          this.dialogEditVisible = false; //编辑弹框的状态
          this.getData(); //数据查询
          this.$notify({
            title: '编辑',
            message: '编辑成功',
            duration: 2000,
            type: 'success'
          });
        }
      })
    },
    //删除弹框显示
    handleDelete(row){
      this.ruleForm = {...row};
      this.dialogDelVisible = true; //删除弹框的状态
    },
    //删除数据
    delData(){
      officeDelete(this.ruleForm.id).then(res=>{
        let {code,data} = res.data;
        if(code==20000){
          this.dialogDelVisible = false; //删除弹框的状态
          this.getData(); //数据查询
          this.$notify({
            title: '删除',
            message: '删除成功',
            duration: 2000,
            type: 'success'
          });
        }
      })
    },
    //提交数据 
    handleSubmit(row){
      officeSubmit({id:row.id}).then(res=>{
        let {code,data} = res.data;
        if(code==20000){
          this.getData(); //数据查询
          this.$notify({
            title: '提交',
            message: '提交成功',
            duration: 2000,
            type: 'success'
          });
        }
      })
    },
    //审批状态筛选方法
    filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;  // row.status ===value
    },
    //审批状态数据过滤
    filterStatus(arr){
      let map = new Map();
      for (let item of arr){  
        let v = {...item}; //避免修改源对象
        if(!map.has(v.status)){
          //methods方法中运用filters过滤器
          v.status2 = this.$options.filters['getStatus'](v.status);
          map.set(v.status,v);
        }
      };
      let arr2 = [...map.values()];  //类型转换
      this.filterStatusData = arr2.map(item=>({text:item.status2,value:item.status}));
      //[{ text: '进件', value: 0 }, { text: '提交一审', value: 1 }]
    }
  }
}
</script>



